<template>
	<view class="data-report">
		<view class="top-box">
			<view class="top-wrap">
				<view class="title-box">费用概况</view>
				<view class="item-box">
					<u-grid :col="2" :border="false">
						<u-grid-item>
							<view class="grid-num" style="color: red;">{{cost}}</view>
							<view class="grid-text">总费用</view>
						</u-grid-item>
						<u-grid-item>
							<view class="grid-num">{{total}}</view>
							<view class="grid-text">总次数</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<view class="report-box">
			<view class="report-title">
				<view class="lins">
					<view class="report-date" @click="timeSelect(true)">
						<view style="font-weight: 550;">开始时间</view>
						<view class="text">
							<text>{{time }} </text>
							<u-icon class="arrow-down" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="report-date" @click="timeSelect(false)">
						<view style="font-weight: 550;">结束时间</view>
						<view class="text">
							<text>{{timeone }} </text>
							<u-icon class="arrow-down" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="search">
						<view class="btn" hover-class="searchbtn" @tap="panduan">查询</view>
					</view>
				</view>
			</view>
			<!-- 			<view class="report-info">
				<u-grid :col="2" :border="false">
					<u-grid-item>
						<view class="report-money">
							
						</view>
						<view class="report-text">运输费用(元)</view>
					</u-grid-item>
					<u-grid-item>
						<view class="report-num">
							<u-count-to :start-val="0" :end-val="totalone"></u-count-to>
						</view>
						<view class="report-text">运输次数</view>
					</u-grid-item>
				</u-grid>
			</view> -->
			<view class="table-box">
				<view class="table-data">
					<u-divider v-if="tableData.length === 0" class="no-data" bg-color="#eaf1ff">暂无数据</u-divider>
					<view class="data-box">
						<view class="data-item" v-for="(item , index) in tableData" :key="index">
							<view class="left">
								<view>{{item.item | dayfilters}}</view>
								<view>{{item.item | timefilters}}</view>
							</view>
							<view class="right">
								<view class="right-item" v-for="(itm , ind) in item.data" :key="ind" :class="{borderbt : item.data.length === 1}">
									<view class="one">
										<view>作业点：{{itm.beginName}}</view>
										<view>{{itm.count}}次</view>
									</view>
									<view class="one">
										<view>卸土点：{{itm.endName}}</view>
										<view style="color: red;">￥{{itm.cost}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 		<view class="export-excel">
			<u-button type="primary">查阅明细</u-button>
		</view> -->
		<u-picker mode="time" v-model="timeShow" :params="params" @confirm="confirm" :default-time="initMonth"></u-picker>
		<u-picker mode="time" v-model="timeShowone" :params="params" @confirm="confirmone" :default-time="initMonthone"></u-picker>
		<kModel ref="kModel" />
	</view>
</template>

<script>
	import {
		getReportData
	} from "@/api/dataReport.js"
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				form: {
					action: 'total',
					carId: uni.getStorageSync('carID')
				},
				formAgin: {
					action: "count",
					projectId: uni.getStorageSync('id'),
					teamId: uni.getStorageSync('teamId')
				},
				timeShow: false,
				timeShowone: false,
				total: 0,
				totalone: 0,
				time: null,
				timeone: null,
				initMonth: null,
				initMonthone: null,
				tableData: [],
				tableShow: false,
				cost: 0,
			};
		},
		created() {
			this.getinitMonth()
			this.getMonth()
		},
		onLoad(opt) {
			// uni.setNavigationBarTitle({
			// 	title: opt.name
			// });
			console.log(opt);
			if (JSON.stringify(opt) !== "{}") {
				// console.log("走了这里");
				this.formAgin.teamId = opt.teamId
				this.formAgin.projectId = opt.projectId
			} else {
				this.formAgin.teamId = uni.getStorageSync('teamId')
				this.formAgin.projectId = uni.getStorageSync('id')
			}
			// console.log(this.formAgin);
		},
		filters: {
			timefilters(time) {
				var thisTime = new Date(time * 1000)
				return `${thisTime.getFullYear()}年${thisTime.getMonth()+1}月`
			},
			dayfilters(time){
				var thisTime = new Date(time * 1000)
				return `${thisTime.getDate()}日`
			}
		},
		methods: {
			clickTableShow(index) {
				if (this.tableShow === index) {
					this.tableShow = 12345678962211
					return
				}
				this.tableShow = index
			},
			isloading(status){
				if(status){
					this.$refs.kModel.showModel({
						type: 'loading',
						title: '获取数据中',
						style: 'circle',
					})
				} else {
					this.$refs.kModel.closeModel()
				}
			},
			openPage(path) {
				uni.navigateTo({
					url: path
				});
			},
			getinitMonth() {
				var MonthDate = new Date(); //上月日期
				this.initMonthone = `${MonthDate.getFullYear()}-${MonthDate.getMonth()+1}-${MonthDate.getDate()}`
				MonthDate.setDate(1);
				this.initMonth = `${MonthDate.getFullYear()}-${MonthDate.getMonth()+1}-${MonthDate.getDate()}`
			},
			getMonth() {
				var MonthDate = new Date(); //上月日期
				this.timeone = `${MonthDate.getFullYear()}年${MonthDate.getMonth()+1}月${MonthDate.getDate()}日`
				this.formAgin.endTime = parseInt(MonthDate.getTime() / 1000)
				
				// var MonthDateOne = new Date(MonthDate.getTime() - 86400000)
				MonthDate.setDate(1)
				this.time = `${MonthDate.getFullYear()}年${MonthDate.getMonth()+1}月${MonthDate.getDate()}日`
				this.formAgin.startTime = parseInt(MonthDate.getTime() / 1000)
			},
			// getReport() {
			// 	getReportData(this.form).then(res => {
			// 		this.total = parseInt(res.result.total)
			// 	})
			// },
			timeSelect(type) {
				if (type) {
					this.timeShow = true
				} else {
					this.timeShowone = true
				}
			},
			getReportList() {
				this.isloading(true)
				this.tableData = []
				getReportData(this.formAgin).then(res => {
					// console.log(res.result);
					for (var item in res.result) {
						let map = {
							item,
							data: res.result[item]
						}
						if (res.result[item].length !== 0) {
							res.result[item].forEach(item => {
								this.cost += item.cost
								this.total += item.count
							})
							// map.data.push(res.result[item])
							this.tableData.push(map)
						}
					}
					this.$nextTick(() =>{
						this.isloading(false)
					})
					console.log(this.tableData)
				})
				// console.log(this.formAgin)
			},
			panduan() {
				if (!!this.time && !!this.timeone) {
					if (this.formAgin.startTime >= this.formAgin.endTime) {
						uni.showToast({
							title: "开始时间不能大于结束时间，请重新选择",
							icon: "none"
						})
						this.time = this.timeone = null
						return
					}
					// console.log(this.formAgin);
					this.getReportList()
					// this.$urlTo.togo("./carDetails/carDetails" , this.formAgin)
				} else {
					this.$urlTo.Tip("请选择时间")
				}
			},
			confirm(res) {
				this.time = `${res.year}年${res.month}月${res.day}日`;
				let date = new Date(`${res.year}-${res.month}-${res.day}`).getTime()
				this.formAgin.startTime = date / 1000
				this.initMonth = `${res.year}-${res.month}-${res.day}`
				// this.panduan()
				// console.log(date)
			},
			confirmone(res) {
				this.timeone = `${res.year}年${res.month}月${res.day}日`
				let date = new Date(`${res.year}-${res.month}-${res.day}`).getTime()
				this.formAgin.endTime = date / 1000

				this.initMonthone = `${res.year}-${res.month}-${res.day}`
				// this.panduan()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.top-box {
		.top-wrap {
			border-radius: 10rpx;
			padding: 10rpx;
			background-color: #ffffff;
		}

		.title-box {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 70rpx;
			letter-spacing: 0rpx;
			color: #5c92ff;
			font-weight: bold;
			height: 110rpx;
			padding: 20rpx 60rpx;
			position: relative;
			border-bottom: 1px solid rgb(239, 239, 239);
		}

		.title-box::before {
			content: '';
			position: absolute;
			width: 8rpx;
			height: 40rpx;
			background-color: #007aff;
			left: 40rpx;
			top: 35rpx;
		}

		.grid-num {
			font-weight: bold;
			font-size: 36rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #2c3240;
		}

		.grid-text {
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #919db8;
			font-weight: bold;
		}
	}

	.report-box {
		margin-top: 20rpx;

		.report-title {
			background-color: #ffffff;
			padding-top: 20rpx;

			.lins {
				// padding: 0 20rpx;
				padding-top: 20rpx;
				box-sizing: border-box;

				.search {
					display: flex;
					justify-content: center;
					margin-top: 20rpx;
					padding-bottom: 20rpx;

					.btn {
						width: 97%;
						box-sizing: border-box;
						height: 80rpx;
						line-height: 80rpx;
						color: white;
						border-radius: 7rpx;
						box-shadow: 0 0 10rpx #C0C0C0;
						text-align: center;
						font-size: 32rpx;
						background-color: #2979FF;
					}
				}
			}

			.report-date {
				// width: 190rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;
				padding-right: 0;
				height: 70rpx;
				background-color: white;
				border-bottom: 1px solid #dcdcdc;
				// border-radius: 30rpx;
				color: #1a1a1a;
				line-height: 70rpx;

				.text {
					color: #adadad;
				}

				&:first-child {
					// margin-bottom: 20rpx;
				}

				.arrow-down {
					// margin-left: 20rpx;
				}
			}
		}

		.report-money {
			font-weight: bold;
			font-size: 48rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #ff4040;
		}

		.report-num {
			font-weight: bold;
			font-size: 48rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #2c3240;
		}

		.report-text {
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #646c7f;
			font-weight: bold;
		}

		.table-box {
			margin-top: 20rpx;
			.title {
				height: 80rpx;
				background-color: #5c92ff;
				line-height: 80rpx;
				color: #ffffff;

			}
		}

		.table-data {
			margin-bottom: 130rpx;
			background-color: white;
			.data-item {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #dcdcdc;
				// padding: 20rpx 0rpx;
				font-size: 24rpx;
				letter-spacing: 0px;
				// color: #111111;
				.left{
					width: 23%;
					padding-top: 20rpx;
					view{
						text-align: center;
					}
				}
				.right{
					width: 77%;
					padding: 0 10rpx;
					.right-item{
						height: 150rpx;
						border-bottom: 1px solid #dcdcdc;
						padding: 0 10rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						
					}
					.one{
						display: flex;
						justify-content: space-between;
						align-items: center;
						&:first-child{
						}
					}
				}
			}

			.data_main {
				font-size: 27rpx;

				.u-row {
					padding: 10rpx 0;
					background-color: white;
					border-bottom: 1px solid #C0C0C0;
					height: 60rpx;

					&:first-child {
						color: #f3f3f3;
						background-color: #a5a5a5;
					}
				}

			}

			.singular {
				background-color: #eaf1ff;
			}

			.dual {
				background-color: #ffffff;
			}

			.data-details {
				font-size: 24rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0px;
				color: #5c92ff;
			}

			.no-data {
				padding-top: 40rpx;
			}
		}
	}

	.export-excel {
		position: fixed;
		width: 100%;
		bottom: 200rpx;
		padding: 0 30rpx;
		z-index: 99;
	}

	.data-wrap {
		// height: 90rpx;
	}

	.title-name {
		text-align: center;
	}

	.text-name {
		text-align: center;
		background-color: white;
	}

	.u-col {
		// padding: 0 !important;
		font-size: 13rpx;
	}

	.searchbtn {
		opacity: .7;
		background-color: #00699d;
	}
	.borderbt{
		border: none !important;
	}
</style>
